<div>
  <style>
    m-edit-textarea:focus {
      background: red;
    }
  </style>
  <m-edit-textarea oninput="console.log('input')" onfocus="console.log('focus')" placeholder="请输入内"></m-edit-textarea>
</div>

<template>
  <style>
    :host {
      display: block;
      min-height: 96px;
      line-height: 1.6;
      border: solid 1px var(--color-border);
      border-radius: 2px;
    }

    :host([disabled=true]) {
      pointer-events: none;
      filter: grayscale(1);
      opacity: .6;
    }

    .root {
      position: relative;
      min-height: inherit;
      max-height: inherit;
    }

    .text {
      caret-color: rgba(var(--color-accent));
      width: 100%;
      background: none;
      font-family: inherit;
      outline: none;
      resize: none;
      border: none;
      color: inherit;
      padding: 8.5px 12px;
      height: 0;
      font-size: inherit;
      line-height: inherit;
      min-height: inherit;
      max-height: inherit;
      word-wrap: break-word;
      word-break: break-all;
      box-sizing: border-box;
      overflow: auto;
      overflow: overlay;
      scrollbar-width: thin;
      display: block;
    }

    .text::placeholder {
      color: var(--color-text-secondary);
    }

    .text::selection {
      background: rgba(var(--color-accent));
      color: #fff;
    }

    .text::-webkit-scrollbar {
      display: none;
    }

    .soul {
      position: absolute;
      left: 0;
      opacity: 0;
      top: 0;
      pointer-events: none;
      min-height: 0;
      max-height: 0;
    }
  </style>
  <div class="root">
    <textarea class="text" part="textarea"></textarea>
    <textarea class="text soul" part="textarea"></textarea>
  </div>
</template>
<script type="module">
  import { define } from '../../core.js'

  const template = $template
  const props = ['value', 'disabled', 'placeholder']
  const setup = (shadow, node) => {
    const [text, soul] = shadow.querySelectorAll('.text')
    const update = () => {
      soul.value = text.value
      text.style.height = soul.scrollHeight + 'px'
    }
    text.addEventListener('input', update)
    text.addEventListener('change', () => node.dispatchEvent(new Event('change')))
    const obs = new ResizeObserver(update)
    obs.observe(node, { box: 'border-box' })
    return {
      onConnected: update,
      onAdopte: update,
      disabled: false,
      value: {
        get: () => text.value,
        set: v => {
          text.value = v
          update()
        }
      },
      placeholder: {
        get: () => text.placeholder,
        set: v => text.placeholder = v
      }
    }
  }

  const shadowRootInit = { delegatesFocus: true }

  define('edit-textarea', { template, props, setup, shadowRootInit })
</script>